<template>
  <div class="user-box">
    <van-nav-bar
      title="用户画像"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group class="user-container">
      <van-cell value="" class="user-img c-padding">
        <template slot="title">
          <span class="van-cell-text">头像</span>
        </template>
        <template>
          <van-uploader
            :after-read="onClickUserImg"
            accept="image/jpeg, image/jpg, image/png">
            <span class="user-img-txt">设置头像</span>
          </van-uploader>
          <img class="user-img-img" :src="imgUrl" alt="">
        </template>
      </van-cell>

      <van-cell value="" class="c-padding clear">
        <van-field
          v-model="form.username"
          label="昵称"
          placeholder="请输入昵称"
          class="c-padding-0"
        />
        <van-field
          v-model="form.sign"
          label="签名"
          type="textarea"
          placeholder="请输入签名"
          rows="2"
          autosize
          class="c-padding-0"
        />
      </van-cell>
      <p class="c-padding-10 user-title">微信信息</p>

      <van-cell value="" class="c-padding clear">
        <van-field
          v-model="form.phoneNum"
          type="number"
          label="手机号"
          placeholder="请输入手机号"
          class="c-padding-0"
        />
        <van-field
          v-model="form.wechatNum"
          label="微信号"
          placeholder="请输入微信号"
          class="c-padding-0"
        />
        <van-cell value="" class="user-img c-padding-0">
          <template slot="title">
            <span class="van-cell-text">微信二维码</span>
          </template>
          <template>
            <van-uploader
              :after-read="onClickWechatImg"
              accept="image/jpeg, image/jpg, image/png">
              <span class="wechat-img-txt">{{ WechatImgTxt }}</span>
            </van-uploader>
            <img class="wechat-img-img" :src="WechatImgUrl" alt="">
          </template>
        </van-cell>
      </van-cell>

      <p class="c-padding-10 user-title">个人信息</p>

      <van-cell value="" class="c-padding clear">
        <span>性别</span>
        <span class="pull-right c-margin-left-10">{{ form.sex }}</span>
        <span class="pull-right" @click="onClickSexDialog">{{ pageText.sex }}</span>
      </van-cell>

      <van-cell value="" class="c-padding clear">
        <span>生日</span>
        <span class="pull-right c-margin-left-10">{{ form.birthDate }}</span>
        <span class="pull-right" @click="onClickBrithPop">{{ pageText.birthDate }}</span>
      </van-cell>

      <van-cell value="" class="c-padding clear">
        <span>行业与职位</span>
        <span class="pull-right c-margin-left-10">{{ form.workInfo }}</span>
        <span class="pull-right" @click="onClickWorkPop">{{ pageText.workInfo }}</span>
      </van-cell>

      <van-cell value="" class="c-padding clear">
        <span>所在城市</span>
        <span class="pull-right" @click="onClickCityPop">{{ pageText.cityInfo }}</span>
        <p class="">{{ form.cityInfo }}</p>
      </van-cell>

      <van-cell value="" class="c-padding clear">
        <span>标签</span>
        <span class="pull-right" @click="onClickLabelPop">{{ pageText.labelInfo }}</span>
        <p class="">{{ form.labelInfo }}</p>
      </van-cell>


      <van-cell value="" class="c-padding clear">
        <van-field
          v-model="form.introduction"
          label="个人介绍"
          type="textarea"
          placeholder="请输入个人介绍"
          rows="4"
          autosize
          class="c-padding-0"
        />
      </van-cell>

      <van-button
        class="city-submit-btn"
        type="default"
        @click="isSubmitClick ? onClickSubmit() : ''"
        >
        提交
      </van-button>
    </van-cell-group>

    <!-- 弹框 -->
    <!-- 性别 -->
    <van-dialog
      v-model="showDialogSex"
      class="dialog-sex"
      :show-confirm-button="showConfirm"
      :before-close="beforeClose"
      >
      <div class="dialog-title">
        <p>选择性别</p>
        <p>提交后不可更改</p>
      </div>
      <van-button
        class="dialog-sex-btn"
        type="default"
        @click="onClickSex(0)"
        >男</van-button>
      <van-button
        class="dialog-sex-btn"
        type="default"
        @click="onClickSex(1)"
        >女</van-button>
    </van-dialog>
    <!-- 生日 -->
    <!-- <van-popup v-model="showDialogBirth" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        :visible-item-count="3"
        @confirm="onClickBrithConfirm"
        @cancel="onClickBrithCancel"
      />
    </van-popup> -->

    <van-dialog
      v-model="showDialogBirth"
      @confirm="onClickBrithDialogConfirm"
      class="user-dialog-birth"
    >
      <div class="user-dialog-container">
        <van-row>
          <van-col class="dialog-birth-top" span="8">年</van-col>
          <van-col class="dialog-birth-top" span="8">月</van-col>
          <van-col class="dialog-birth-top" span="8">日</van-col>
        </van-row>
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          :visible-item-count="3"
          @change="onClickBrithChange"
        />
      </div>
    </van-dialog>
    <!-- 职位 -->
    <van-dialog
      v-model="showDialogWork"
      class="dialog-sex"
      show-cancel-button
      @confirm="dialogWorkConfirm"
    >
      <div class="dialog-title">
        <p>选择职位</p>
        <p>提交后不可更改</p>
      </div>
      <van-row class="work-container">
        <van-col offset="4" span="16">
          <select name="" class="work-select" ref="workSelect">
            <option value="0">请选择</option>
            <option value="宝妈">宝妈</option>
            <option value="白领">白领</option>
            <option value="高管">高管</option>
          </select>
        </van-col>
      </van-row>
    </van-dialog>
    <!-- 城市 -->
    <van-popup
      v-model="showDialogCity"
      position="right"
      class="city-container"
      >
      <van-nav-bar title="选择城市">
      </van-nav-bar>
      <p class="city-container-title">最多可选四个城市</p>
      <van-checkbox-group v-model="citySelectedArr" :max="4">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in cityArr"
            :title="item"
            :key="item"
            >
            <van-checkbox :name="item" />
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <van-button
        class="city-container-btn"
        type="default"
        @click="onClickCitySelectBtn"
        >确定</van-button>
    </van-popup>
    <!-- 标签 label -->
    <van-popup
      v-model="showDialogLabel"
      position="right"
      class="city-container"
    >
      <van-nav-bar title="选择标签">
      </van-nav-bar>
      <van-checkbox-group v-model="labelSelectedArr">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in labelArr"
            :title="item"
            :key="item"
            >
            <van-checkbox :name="item" />
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <van-button
        class="city-container-btn"
        type="default"
        @click="onClickLabelSelectBtn"
        >
        确定
      </van-button>
    </van-popup>
    <!-- 弹框 END -->
  </div>
</template>

<script>
  import {
    Field,
    Button,
    Row,
    Col,
    Cell,
    CellGroup,
    Icon,
    NavBar,
    Uploader,
    Dialog,
    RadioGroup,
    Radio,
    DatetimePicker,
    Popup,
    Picker,
    Checkbox,
    CheckboxGroup
  } from 'vant';
  import {formatDate} from '../../../static/js/format-date.js'
  export default {
    components: {
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Icon.name]: Icon,
      [NavBar.name]: NavBar,
      [Uploader.name]: Uploader,
      [Dialog.name]: Dialog,
      [RadioGroup.name]: RadioGroup,
      [Radio.name]: Radio,
      [DatetimePicker.name]: DatetimePicker,
      [Popup.name]: Popup,
      [Picker.name]: Picker,
      [Checkbox.name]: Checkbox,
      [CheckboxGroup.name]: CheckboxGroup
    },
    data() {
      return {
        showDialogSex: false,
        showConfirm: false,
        showDialogBirth: false,
        showDialogWork: false,
        showDialogCity: false,
        showDialogLabel: false,
        minDate: new Date(1920, 0, 1),
        maxDate: new Date(),
        currentDate: new Date(2018, 0, 1),
        cityArr: ['上海', '北京', '成都', '武汉', '重庆', '广州', '深圳'],
        citySelectedArr: [],
        labelArr: ['标签0', '标签1', '标签2', '标签3', '标签4', '标签5', '标签6'],
        labelSelectedArr: [],
        WechatImgTxt: '上传',
        isSubmitClick: true,
        pageText: {
          sex: '选择',
          birthDate: '选择',
          workInfo: '选择',
          cityInfo: '最多选择4个城市',
          labelInfo: '添加',
        },
        form: {
          imgArr: '',
          username: '',
          sign: '',
          phoneNum: '',
          wechatNum: '',
          WechatImgArr: '',
          sex: '',
          birthDate: '',
          workInfo: '',
          cityInfo: '',
          labelInfo: '',
          introduction: ''
        },
        imgUrl: '',
        WechatImgUrl: ''
      }
    },
    mounted() {
      // 注册页面传过来的参数
      let params = this.$route.params;
      if(params.info) {
        this.form.phoneNum = params.info.phoneNumber;
      }
    },
    methods: {
      onClickLeft() {
        // 点击返回
        this.$router.go(-1);
      },
      onClickUserImg(file) {
        // 选择用户头像
        this.imgUrl = file.content;

        // 用户头像长度一直为1
        let formData = new FormData();
        formData.append('file', file.file);
        formData.append('fileType', 'head');

        this.$axios.post(url_g + '/file/uploadFile',formData,{
          params:{
          },
        }).then((res)=>{
          console.log(res);
          let data = res.data;
          if(data.success) {
            this.form.imgArr = data.data;
          } else {
            this.$dialog.alert({
              message: data.message
            });
          }
        }).catch((e)=>{
          this.isLogin = true;
          this.$dialog.alert({
            message: '您输入的信息有误或网络有问题，请检查重试！'
          });
        });
      },
      onClickWechatImg(file) {
        // 选择头像
        this.WechatImgUrl = file.content;
        this.WechatImgTxt = '重新上传';

        // 头像长度一直为1
        let formData = new FormData();
        formData.append('file', file.file);
        formData.append('fileType', 'wechat');

        this.$axios.post(url_g + '/file/uploadFile',formData,{
          params:{
          },
        }).then((res)=>{
          console.log(res);
          let data = res.data;
          if(data.success) {
            this.form.WechatImgArr = data.data;
          } else {
            this.$dialog.alert({
              message: data.message
            });
          }
        }).catch((e)=>{
          this.isLogin = true;
          this.$dialog.alert({
            message: '您输入的信息有误或网络有问题，请检查重试！'
          });
        });
      },
      onClickSexDialog() {
        // 性别选择
        this.showDialogSex = true;
      },
      onClickBrithPop() {
        // 生日选择
        this.showDialogBirth = true;
      },
      beforeClose(action, done) {
        if (action === 'confirm') {
          setTimeout(done, 1000);
        } else {
          done();
        }
      },
      onClickBrithConfirm(val) {
        let date = formatDate(val, 'yyyy-MM-dd')
        this.form.birthDate = date;
        this.pageText.birthDate = '重新选择';
        this.showDialogBirth = false;
      },
      onClickBrithChange(val) {
        let pickerDate = val.getValues();
        console.log(pickerDate);
        this.form.birthDate = pickerDate[0] + '-' + pickerDate[1] + '-' + pickerDate[2];
      },
      onClickBrithDialogConfirm() {
        this.pageText.birthDate = '重新选择';
        this.showDialogBirth = false;
      },
      onClickBrithCancel() {
        this.showDialogBirth = false;
      },
      onClickSex(num) {
        // num: 0 男  1 女
        this.form.sex = num == 0 ? '男' : '女';
        this.pageText.sex = '重新选择';
        this.showDialogSex = false;
      },
      onClickWorkPop() {
        this.showDialogWork = true;
      },
      dialogWorkConfirm() {
        let thisItem = this.$refs.workSelect;
        let options = thisItem.options;
        let index = thisItem.selectedIndex;
        if(index !== 0) {
          this.showDialogWork = false;
          this.form.workInfo = options[index].value;
          this.pageText.workInfo = '重新选择';
        } else {
          this.showDialogWork = true;
          this.$dialog.alert({
            message: '请完成选择'
          });
        }
      },
      onClickCityPop() {
        this.showDialogCity = true;
      },
      onClickCitySelectBtn() {
        let length = this.citySelectedArr.length;
        if(length === 0) {
          this.$dialog.alert({
            message: '请完成选择'
          });
        } else {
          let cityStr = '';
          this.citySelectedArr.map((item, index) => {
            if(index === 0) {
              cityStr += item;
            } else {
              cityStr += ',' + item;
            }
          })
          this.showDialogCity = false;
          this.form.cityInfo = cityStr;
          this.pageText.cityInfo = '重新选择';
        }
      },
      onClickLabelPop() {
        this.showDialogLabel = true;
      },
      onClickLabelSelectBtn() {
        let length = this.labelSelectedArr.length;
        if(length === 0) {
          this.$dialog.alert({
            message: '请完成选择'
          });
        } else {
          let labelStr = '';
          this.labelSelectedArr.map((item, index) => {
            if(index === 0) {
              labelStr += item;
            } else {
              labelStr += ',' + item;
            }
          })
          this.showDialogLabel = false;
          this.form.labelInfo = labelStr;
          this.pageText.labelInfo = '重新选择';
        }
      },
      onClickSubmit() {
        console.log(this.form)
        // TODO: 跳转
        // this.$router.push('/home');

        for( let key in this.form) {
          if(this.form[key] === '') {
            this.$dialog.alert({
              message: '请完成选择'
            });
            this.isSubmitClick = true;
            return false;
          }
        }
        this.isSubmitClick = false;

        // 登录逻辑
        this.$axios({
          method: "POST",
          data: '',
          url: url_g + '',
          auth: {
          }
        }).then((res) => {
          this.$router.push('/home');
        }).catch((e)=>{
          this.$dialog.alert({
            message: '您输入的信息有误或网络有问题，请检查重试！'
          });
        });
      },
    }
  }
</script>

<style scoped="scoped">
* {
  font-size: 14px;
}
.pull-right {
  float: right;
}
.c-padding-0 {
  padding: 10px 0;
}
.c-padding-10 {
  padding: 0 10px;
}
.c-padding {
  padding: 10px 30px;
}
.c-margin-left-10 {
  margin-left: 10px;
}
.user-img {
  position: relative;
  height: 52px;
  line-height: 32px;
}
.user-img-txt,
.wechat-img-txt {
  text-align: right;
  margin-right: 52px;
}
.user-img-img,
.wechat-img-img {
  position: absolute;
  top: 5px;
  right: 30px;
  text-align: right;
  width: 42px;
  height: 42px;
  line-height: 32px;
  border-radius: 50%;
}
.wechat-img-img {
  border-radius: 0;
  top: 5px;
  right: 0;
}
.user-title {
  line-height: 20px;
}
.dialog-sex {
  padding: 10px;
}
.dialog-title {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.dialog-title p:first-of-type {
  font-size: 20px;
  line-height: 24px;
}
.dialog-title p:last-of-type {
  color: red;
  line-height: 20px;
}
.dialog-sex-btn {
  width: 100%;
  text-align: left;
  border-bottom: 1px solid #ccc;
}
.work-container {
  padding: 80px 0;
}
.work-select {
  width: 100%;
  height: 30px;
  border-radius: 5px;
  font-size: 16px;
}
.city-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.city-container-title {
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-bottom: 1px solid #f4f4f4;
}
.city-submit-btn {
  width: 100%;
  text-align: center;
}
.city-container-btn {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
}
.user-dialog-container {
  padding: 10px 20px 20px 20px;
}
.dialog-birth-top {
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
</style>